<template>
  <div class="add-wrap">
    <a-icon
      class="add-icon"
      type="plus-circle"
      theme="filled"
      @click="popShow = !popShow"
    />
    <Transition>
      <div class="pop-wrap" v-if="popShow">
        <a-space>
          <a-button type="primary" icon="deployment-unit" @click="process(1)">{{ $t('all.autotext62') }}</a-button>
          <a-button class="pop-btn" icon="branches" @click="process(2)">{{ $t('all.autotext1461') }}</a-button>
        </a-space>
      </div>
    </Transition>
  </div>
</template>
<script>
export default {
  props: ['index'],
  data () {
    return {
      popShow: false
    }
  },
  methods: {
    process (e) {
      this.$emit('add', e, this.index)
      this.popShow = false
    }
  }
}
</script>
<style lang="less" scoped>
.add-wrap {
  display: flex;
  height:80px;
  align-items: center;
  border-left: 1px solid #CED0D6;
  padding-bottom: 30px;
  position: relative;
  .add-icon {
    font-size: 20px;
    cursor: pointer;
    color: #1890ff;
    position: absolute;
    left: -18px;
    background: #F4F5F7;
    padding:8px;
  }
  .pop-wrap {
    padding-left: 24px;
    .pop-btn {
      border: 1px solid #1890ff;
      color: #1890ff;
      background: #F4F5F7;
    }
  }
}
</style>
